<template>
  <div>
    <h3>圆周率为：{{ pai }}</h3>
    <h3>勾股定理是：{{ gouGu }}</h3>
    <h3>三角形面积公式：{{ area }}</h3>
    <hr />
    <h3>求和结果为：{{ sum }}</h3>
    <h3>当前求和放大10倍为：{{ enlarge }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">两数相加</button>
    <button @click="decrement(n)">两数相减</button>
    <button @click="incrementOdd(n)">相加的结果为奇数时再加</button>
    <button @click="incrementWait(n)">延时相加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Calculate",
  data() {
    return {
      n: 1, //用户选择的数字
    };
  },
  computed: {
    //靠程序员自己写的计算属性
    /*
    pai() {
      return this.$store.state.pai;
    },
    gouGu() {
      return this.$store.state.gouGu;
    },
    //getter 属性
    area() {
      return this.$store.getters.area;
    },
    */

    /**********************  对象写法  *******************/
    //借助 mapState 生成计算属性，从 state 中读取数据（对象写法）
    //...mapState({ sum: "sum", pai: "pai", gouGu: "gouGu" }),

    //借助 mapGetters 生成计算属性，从 getters中读取数据。（对象写法）
    //...mapGetters({ area: "area", enlarge: "enlarge" }),

    /**********************  数组写法  *******************/
    //借助 mapState 生成计算属性，从 state 中读取数据（数组写法）
    ...mapState(["sum", "pai", "gouGu"]),

    //借助 mapGetters 生成计算属性，从 getters中读取数据。（数组写法）
    ...mapGetters(["enlarge", "area"]),
  },
  methods: {
    // 程序员亲自写方法
    /*
    // 两数相加，使用 $store.dispatch 触发 actions 中的回调
    increment() {
      this.$store.dispatch("increment", this.n);
    },
    // 两数相减，使用 $store.dispatch 触发 actions 中的回调
    decrement() {
      this.$store.dispatch("decrement", this.n);
    },
    //相加的结果为奇数时再加，使用 $store.commit 触发 mutations 中的回调
    incrementOdd() {
      this.$store.commit("INCREMENT_ODD", this.n);
    },
    //延时相加，使用 $store.commit 触发 mutations 中的回调
    incrementWait() {
      this.$store.commit("INCREMENT_WAIT", this.n);
    },
    */

    /*************** 对象写法  *******************/
    //借助 mapActions 生成对应的方法，方法中会调用 dispatch 去联系 actions (对象写法)
    //...mapActions({ increment: "increment", decrement: "decrement" }),

    //借助 mapMutations 生成对应的方法，方法中会调用 commit 去联系 mutations (对象写法)
    ...mapMutations({
      incrementOdd: "INCREMENT_ODD",
      incrementWait: "INCREMENT_WAIT",
    }),

    /*************** 数组写法  *******************/
    // 借助 mapActions 生成对应的方法，方法中会调用 dispatch 去联系 actions (数组写法)
    ...mapActions(["increment", "decrement"]),

    //借助 mapMutations 生成对应的方法，方法中会调用 commit 去联系 mutations (数组写法)
    //注意：如果使用数组的写法，需要保证①调用函数的地方、②数组的写法、③index.js里mutations的函数名三者保持一致！
    //...mapMutations(["INCREMENT_ODD", "INCREMENT_WAIT"]),
  },
};
</script>

<style>
</style>